<template>
	<n-button
		class="base-button app-bg-react"
		:class="defaultClass"
		:type="type"
		:size="size"
		:round="round"
		:block="block"
		v-bind="$attrs">
		<template v-for="k in Object.keys($slots)" #[k] :key="k">
			<slot :name="k"></slot>
		</template>
		<base-text :class="{ 'app-font-bold': bold }" :text="text" :textT="textT"></base-text>
	</n-button>
</template>

<script setup lang="ts">
import BaseText from '../text/index.vue'
import { computed, PropType } from 'vue'
import { ButtonProps, NButton } from 'naive-ui'

const props = defineProps({
	type: {
		type: String as PropType<ButtonProps['type']>,
		default: ''
	},
	size: {
		type: String as PropType<ButtonProps['size']>,
		default: 'large'
	},
	text: {
		type: [Number, String],
		default: ''
	},
	textT: {
		type: [String, Array],
		default: ''
	},
	round: {
		type: Boolean,
		default: false
	},
	block: {
		type: Boolean,
		default: true
	},
	bold: {
		type: Boolean,
		default: false
	}
})

const defaultClass = computed(() => (!props.type ? 'default' : ''))
</script>

<style scoped lang="scss">
.base-button {
	--n-text-color: var(--color-white) !important;
	--n-text-color-focus: var(--color-white) !important;
	--n-text-color-hover: var(--color-white) !important;
	--n-text-color-pressed: var(--color-white) !important;
	--n-border-disabled: var(--color-bg-3) !important;

	&.default {
		background: var(--color-bg-4);
		color: var(--color-text-1);

		&:hover {
			background: var(--color-bg-5);
		}
	}

	&.n-button--primary-type:hover {
		background: var(--color-primary-hover) !important;
	}

	&.n-button--info-type:hover {
		background: var(--color-info-hover) !important;
	}

	&.n-button--disabled {
		color: var(--color-text-3) !important;
		opacity: 1;
		background-color: var(--color-bg-3) !important;

		&:hover {
			background: var(--color-bg-4) !important;
		}
	}
}
</style>
